<template>
    <div>
        <!-- 搜索  -->
        <!-- <SearchData></SearchData> -->
        <SearchData
        :searchProps="searchProps"
        @handleChange="handleChange"
        @searchHandel="searchHandel"
        ></SearchData>
        <!-- 导入导出  -->
        <div style="display: flex;">
            <el-button type="primary" id="but" @click="add()">
                新增毕业学生
            </el-button>
            <el-button type="primary" id="but" @click="deleteAll()">
                批量删除
            </el-button>
            <el-button type="primary" id="but" @click="dialogVisible2 = true">
                学生批量导入
            </el-button>
            <el-button type="primary" id="but" @click="DaoLever()">
                学生批量导出
            </el-button>
        </div>
        <!-- 表格封装  -->
        <TableData :currentPageData="currentPageData" :InfoFilled="InfoFilled" @xuan="xuan" @watch="wathca" @edit="edit"
            @del="del" @cancelEvent="cancelEvent"></TableData>

        <!-- 分页封装  -->
        <PageYe :currentPage="currentPage" :pageSize="pageSize" :total="filteredCount"
            @update:currentPage="currentPage = $event" @update:pageSize="sizeChange">

        </PageYe>

        <el-dialog v-model="dialogVisible" :title="flag ? '新增' : '编辑'" width="500">
            <el-form :model="forms" style="max-width: 600px">
                <el-form-item label="学生ID" v-if="flag === false">
                    <el-input v-model="forms.id" type="text" autocomplete="off" :disabled="flag === false" />
                </el-form-item>
                <el-form-item label="学生学号">
                    <el-input v-model="forms.stuNo" type="text" autocomplete="off" />
                </el-form-item>
                <el-form-item label="学生姓名">
                    <el-input v-model="forms.stuName" />
                </el-form-item>
                <el-form-item label="学生班级">
                    <el-input v-model="forms.className" />
                </el-form-item>
                <el-form-item label="学院名称">
                    <el-input v-model="forms.collegeid" />
                </el-form-item>
                <el-form-item label="市场部">
                    <el-input v-model="forms.origin" />
                </el-form-item>
                <el-form-item label="学生专业">
                    <el-input v-model="forms.expertiseid" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">
                        确定
                    </el-button>
                    <el-button @click="cancel">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog v-model="dialogVisible1" title="查看学生信息" width="500">
            <el-form :model="forms" style="max-width: 700px">
                <el-form-item label="学生ID" v-if="flag === false">
                    <el-input v-model="forms.id" type="text" autocomplete="off" :disabled="flag === false" />
                </el-form-item> 
                <el-form-item label="编号">
                    <el-text class="mx-1">{{ watchData.id }}</el-text>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-text class="mx-1">{{ watchData.stuName }}</el-text>
                </el-form-item>
                <el-form-item label="学号">
                    <el-text class="mx-1">{{ watchData.stuNo }}</el-text>
                </el-form-item>
                <el-form-item label="班级">
                    <el-text class="mx-1">{{ watchData.className }}</el-text>
                </el-form-item>
                <el-form-item label="出处">
                    <el-text class="mx-1">{{ watchData.origin }}</el-text>
                </el-form-item>
                <el-form-item label="专业">
                    <el-text class="mx-1">{{ watchData.createdTime }}</el-text>
                </el-form-item>
                <el-form-item>
                    <el-button @click="dialogVisible1 = false">关闭</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog v-model="dialogVisible2" title="用户导入" width="800">
            <el-upload class="upload-demo" drag action="#" :http-request="handleStudentEnter" multiple>
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">
                    将文件拖到此处，或 <em>点击上传</em>
                </div>
                <template #tip>
                    111
                </template>
            </el-upload>
            <template #footer>
                <el-button type="primary" @click="butQueding">提交</el-button>
                <el-button @click="dialogVisible2 = false">关闭</el-button>
            </template>
        </el-dialog>

    </div>
</template>

<script setup lang="ts">
import { employ_add, employ_list, employ_edit, employ_deltail, employ_delete, Intell_Daoenter } from '@/request';
import { ElTable, ElMessage, type ComponentSize } from 'element-plus'
import { computed, onMounted, reactive, ref } from 'vue';
import { InfoFilled } from '@element-plus/icons-vue'
import CityData from '@/assets/json/CityData.json'
import qs from 'qs';
// const size = ref<ComponentSize>('default')
// const background = ref(false)
// const disabled = ref(false)
// 导入 
import { UploadFilled } from '@element-plus/icons-vue'
import PageYe from './components/PageYe.vue';
import TableData from './components/TableData.vue';
import SearchData from './components/SearchData.vue';
const dialogVisible = ref(false)
// 判断新增编辑标题 
const flag = ref(true)
const forms = reactive({
    // 编号 
    id: '',
    // 学号 
    stuNo: '',
    // 姓名
    stuName: '',
    // 班级
    className: '',
    // 学院id
    collegeid: '',
    // 市场部 
    origin: '',
    // 专业id
    expertiseid: ''
})
// 数据变量 
const tableData = ref([])
// 获取数据 
const InitData = () => {
    employ_list().then(res => {
        console.log(res, '11111')
        tableData.value = res.data.data.result
    })
}
// 页面加载 
onMounted(() => {
    InitData()
})
// 新增 
const add = () => {
    dialogVisible.value = true
    flag.value = true
    forms.stuNo = ''
    forms.stuName = ''
    forms.className = ''
    forms.collegeid = ''
    forms.origin = ''
    forms.expertiseid = ''
}
// 删除 
const del = (index: number, row: any) => {
    console.log('del', index, row)
    let id = row.id
    console.log('delid', id)
    employ_delete(id).then(res => {
        console.log(res, '删除的信息')
        ElMessage.success('删除成功！')
        InitData()

    })
}
const cancelEvent = () => {
    console.log('cancel!')
}
// 批量删除 
const delData = ref([])
// 多选 获取数据ref 
const xuan = (val: any) => {
    console.log(val, '222delAll');
    let ids = val.map((item: any, index: number) => {
        return item.id
    })
    console.log(ids, '222del');
    delData.value = ids
    console.log([...delData.value])
}
const deleteAll = () => {
    let ids = delData.value
    employ_delete(ids).then(res => {
        console.log(res, '批量删除')
        InitData()
        ElMessage.success('批量删除成功！')
    })
}
// 修改 
const edit = (index: number, row: any) => {
    dialogVisible.value = true
    flag.value = false
    forms.id = row.id
    forms.stuNo = row.stuNo
    forms.stuName = row.stuName
    forms.className = row.className
    forms.origin = row.origin
    forms.collegeid = row.collegeid
    forms.expertiseid = row.expertiseid
    switch (row.collegeName) {
        case '游戏学院':
            forms.collegeid = '1'
            break;
        case '网站工程学院':
            forms.collegeid = '2'
            break;
        default:
            break;
    }
    switch (row.expertiseName) {
        case '游戏开发':
            forms.expertiseid = '1'
            break;
        case '游戏设计':
            forms.expertiseid = '2'
            break;
        case '元宇宙':
            forms.expertiseid = '3'
            break;
        default:
            break;
    }

}
const submitForm = () => {
    console.log('获取到的信息', forms)
    const { stuNo, className, stuName, collegeid, origin, expertiseid } = forms
    // 新增 
    if (flag.value) {
        employ_add({ stuNo, className, stuName, collegeid, origin, expertiseid }).then(res => {
            if (res.data.code === 200) {
                console.log(res);
                ElMessage.success('新增成功！')
                InitData()
            }
            console.log('新增数据', res)
        })
    } else {
        // 修改 
        employ_edit(forms).then(res => {
            if (res.data.code === 200) {
                ElMessage.success('编辑成功！')
                InitData()
            }
        })
    }
    dialogVisible.value = false
}
const cancel = () => {
    dialogVisible.value = false
}
const dialogVisible1 = ref(false)
const watchData = ref({})
// 查看 
const wathca = (index: number, row: any) => {
    console.log('查看', index, row)
    let id = row.id
    employ_deltail(id).then(res => {
        console.log('查看信息', res)
        dialogVisible1.value = true
        watchData.value = res.data.data
    })
}

// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const filteredCount = computed(() => tableData.value.length)

const currentPageData = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value
    const end = start + pageSize.value
    return tableData.value.slice(start, end)
})
const currentChange = (page: number) => {
    currentPage.value = page
}
const sizeChange = (newPageSize: number) => {
    pageSize.value = newPageSize
    currentPage.value = 1
}

// 搜索 
const searchProps = reactive({
    stuName: '',
    origin: '',
    collegeId: '',
    workCity: '',
})

const handleChange = (value: Object) => {
    console.log(value)
}
// 进去后一个参数 
const changelast = computed(() => {
    const workCity = searchProps.workCity
    return Array.isArray(workCity) && workCity.length ? workCity[workCity.length - 1] : '';
})

// 搜索 
const searchHandel = () => {
    console.log("searchHandel1", searchProps)
    // 赋值给searchProps.workCity 
    searchProps.workCity = changelast.value
    for (const key in searchProps) {
        console.log('key', key, searchProps[key])
        if (!searchProps[key]) {
            delete searchProps[key]
        }
        console.log('searchHandel2', searchProps)
    }
    employ_list(searchProps).then(res => {
        console.log(res);
        tableData.value = res.data.data.result
    })
    // searchProps.workCity = ''
}
// 导入 
// const showCode = ref(true)
// 通过Excel批量导入数据 
const handleStudentEnter = (file) => {
    console.log('11123', file.file)
    let formdate = new FormData()
    formdate.append('excelFile', file.file)
    formdate.append('code', '1100')
    Intell_Daoenter(formdate).then(res => {
        console.log('excel111', res);
    })
}
const dialogVisible2 = ref(false)
const butQueding = () => {
    dialogVisible2.value = false
}
// 导出 
const DaoLever = () => {
    const link = document.createElement("a")
    link.style.display = "none"
    link.href = 'http://localhost:3002/v1.0/api/export/students?' + qs.stringify(searchProps)//"qs" 是 "query string" 的缩写，通常用于表示查询字符串，它是一种在 URL 中传递参数的方式。在编程和 Web 开发中，"qs" 也可能指代一个用于处理查询字符串的库或模块。
    link.setAttribute('download', '学生信息表.xls')
    document.documentElement.appendChild(link)
    link.click()
}
</script>

<style scoped>
#but {
    width: 130px;
    height: 40px;
    margin-bottom: 20px;
    background-color: #214bc9;
    color: #fff;
    font-size: 20px;
}

#but1 {
    width: 80px;
    height: 40px;
    margin-bottom: 20px;
    background-color: #214bc9;
    color: #fff;
    font-size: 20px;
}

/* 导入的样式  */
.el-icon--upload {
    width: 400px;
    height: 400px;
    font-size: 230px;
}

.upload-demo {
    height: 550px;
    border: #bababa dashed 1px
}
</style>
